<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>共同借款人</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link th:href="@{/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">

    <!-- Custom CSS -->
    <link th:href="@{/dist/css/sb-admin-2.css}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link th:href="@{/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">

    <link th:href="@{/vendor/datepicker/datepicker3.css}" rel="stylesheet" type="text/css">

    <!--bootstrap-table CSS-->
    <link th:href="@{vendor/bootstrap/css/bootstrap-table.css}" rel="stylesheet" type="text/css">

    <!-- jQuery -->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/dist/js/sb-admin-2.js}"></script>

    <script th:src="@{/vendor/datepicker/bootstrap-datepicker.js}"></script>

    <!--bootstrap-table JavaScript-->
    <script th:src="@{vendor/bootstrap/js/bootstrap-table.js}"></script>

    <script>
        $(function () {
            $("#save").click(function () {
                if ($("#personalflag").val() == "1") {
                    $("#ethnic").val("");
                    $("#firstName").val("");
                    $("#lastName").val("");
                }
                if ($("#personalflag").val() == "2") {
                    $("#pidtypeid").val("");
                    $("#pIdNo").val("");
                    $("#name").val("");
                }
//                var loanjointapplicantid = $("#loanjointapplicantid").val();
//                $.ajax({
//                    type: "POST",
//                    url: "/coborrower_insertCheck",
//                    contentType: "application/json",
//                    dataType: "html",
//                    data: JSON.stringify({
//                        loanjointapplicantid: loanjointapplicantid.toString()
//                    }),
//                    success: function (result) {
//                        return result;
////                        if (result ==0){
////                            $("#checklineno").show();
//////                            $("#line_no").val("额度号必须是贷款申请客户本人的.");
////                        }else {
////                            $("#checklineno").hide();
////                        }
//                    }
//                });
            });

            $("#personalflag").change(function () {
                $("#line_no").val("");
                $("#remark").val("");
                $("#pidtypeid").val("");
                $("#pIdNo").val("");
                $("#name").val("");
                $("#ethnic").val("");
                $("#firstName").val("");
                $("#lastName").val("");
                if ($("#personalflag").val() == "1") {
                    $("#individual").show();
                    $("#company").hide();
                }
                if ($("#personalflag").val() == "2") {
                    $("#company").show();
                    $("#individual").hide();
                }
            });

            $("#line_no").blur(function () {
                var line_no = $("#line_no").val();
                var custcode = $("#custcode").val();
                $.ajax({
                    type: "POST",
                    url: "/coborrowerInfo_CheckLineno",
                    contentType: "application/json",
                    dataType: "html",
                    data: JSON.stringify({
                        line_no: line_no.toString(),
                        custcode: custcode.toString()
                    }),
                    success: function (result) {
                        if (result == 0) {
                            $("#checklineno").show();
//                            $("#line_no").val("额度号必须是贷款申请客户本人的.");
                        } else {
                            $("#checklineno").hide();
                        }
                    }
                });
            });
        })

        $(function () {
            function queryParams(params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    //                    limit: params.limit,   //页面大小
                    //                    offset: params.offset,  //页码
                    custcode: $("#custcode").val(),
                    //                    statu: $("#txt_search_statu").val()
                };
                return temp;
            }

            $('#tb_per_coborrowerinfo').bootstrapTable({
                url: '/perCoBorrowerInfo_Search',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'line_no',
                    title: '额度号'
                }, {
                    field: 'pidtypeid',
                    title: '证件类型',
                    formatter: function (value, row, index) {
                        if (value == 'IDW') {
                            return "军官证";
                        } else if (value == 'IDY') {
                            return "港澳居民来往内地通行证";
                        } else if (value == 'IDQ') {
                            return "身份证/户口簿/国内护照";
                        } else if (value == 'IDU') {
                            return "国外护照";
                        } else if (value == 'IDR') {
                            return "士兵证";
                        } else if (value == 'IDT') {
                            return "台湾同胞来往内地通行证";
                        } else if (value == 'IDL') {
                            return "其他";
                        } else if (value == 'IDE') {
                            return "警官证";
                        } else if (value == 'IDP') {
                            return "营业执照";
                        }
                    }
                }, {
                    field: 'pIdNo',
                    title: '证件号码'
                }, {
                    field: 'name',
                    title: '姓名'
                }],

                onClickRow: function (row) {
                    $("#individual").show();
                    $("#company").hide();
                    $("#loanjointapplicantid").val(row.loanjointapplicantid);
                    $("#line_no").val(row.line_no);
                    $("#personalflag").val(row.personalflag);
                    $("#pidtypeid").val(row.pidtypeid);
                    $("#pIdNo").val(row.pIdNo);
                    $("#name").val(row.name);
                    $("#remark").val(row.remark);
                }

            });

            $('#tb_com_coborrowerinfo').bootstrapTable({
                url: '/comCoBorrowerInfo_Search',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'line_no',
                    title: '额度号'
                }, {
                    field: 'ethnic',
                    title: '贷款卡编号'
                }, {
                    field: 'firstName',
                    title: '中文名称'
                }, {
                    field: 'lastName',
                    title: '英文名称'
                }],

                onClickRow: function (row) {
                    $("#company").show();
                    $("#individual").hide();
                    $("#loanjointapplicantid").val(row.loanjointapplicantid);
                    $("#line_no").val(row.line_no);
                    $("#personalflag").val(row.personalflag);
                    $("#ethnic").val(row.ethnic);
                    $("#firstName").val(row.firstName);
                    $("#lastName").val(row.lastName);
                    $("#remark").val(row.remark);
                }

            });

            $("#btn_add_per").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/perCoBorrowerInfo_add",
                    dataType: "json",
                    async: false,
                    success: function (row) {
                        $("#individual").show();
                        $("#company").hide();
                        $("#loanjointapplicantid").val(row.loanjointapplicantid);
                        $("#line_no").val(row.line_no);
                        $("#personalflag").val("1");
                        $("#pidtypeid").val(row.pidtypeid);
                        $("#pIdNo").val(row.pIdNo);
                        $("#name").val(row.name);
                        $("#remark").val(row.remark);
                    }
                });
            })

            $('#btn_delete_per').click(function () {
                var delete_rows = $('#tb_per_coborrowerinfo').bootstrapTable('getAllSelections');
                var json = [];
                for (var i = 0; i < delete_rows.length; i++) {
                    json.push(delete_rows[i].loanjointapplicantid);
                }
                if (json == null || json == "") {
                    alert("请选择要删除的数据行");
                } else {
                    $.ajax({
                        type: "POST",
                        url: "/deletePerCoBorrowerInfo",
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify(json),
                        async: false,
                        success: function (result) {
                            $('#tb_per_coborrowerinfo').bootstrapTable("refresh", {
                                silent: true
                            });
                            alert(result.message);
                            $('#btn_add_per').trigger("click");
                        },
                        error: function (result) {
                            alert(result.message);
                        }
                    });
                }
            });

            $("#btn_add_com").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/comCoBorrowerInfo_add",
                    dataType: "json",
                    async: false,
                    success: function (row) {
                        $("#company").show();
                        $("#individual").hide();
                        $("#loanjointapplicantid").val(row.loanjointapplicantid);
                        $("#line_no").val(row.line_no);
                        $("#personalflag").val("2");
                        $("#ethnic").val(row.ethnic);
                        $("#firstName").val(row.firstName);
                        $("#lastName").val(row.lastName);
                        $("#remark").val(row.remark);
                    }
                });
            })

            $('#btn_delete_com').click(function () {
                var delete_rows = $('#tb_com_coborrowerinfo').bootstrapTable('getAllSelections');
                var json = [];
                for (var i = 0; i < delete_rows.length; i++) {
                    json.push(delete_rows[i].loanjointapplicantid);
                }
                if (json == null || json == "") {
                    alert("请选择要删除的数据行");
                } else {
                    $.ajax({
                        type: "POST",
                        url: "/deleteComCoBorrowerInfo",
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify(json),
                        async: false,
                        success: function (result) {
                            $('#tb_com_coborrowerinfo').bootstrapTable("refresh", {
                                silent: true
                            });
                            alert(result.message);
                            $('#btn_add_com').trigger("click");
                        },
                        error: function (result) {
                            alert(result.message);
                        }
                    });
                }
            });
        })
    </script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div id="wrapper">
    <div id="page-wrapper" style="margin-left: 0px;">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">共同借款人</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!--  <form  th:action="@{/app}"  th:object="${apply_entity}" method="post">  -->
        <form novalidate name="actForm" method="post" th:action="@{/coborrowerInfo(loanjointapplicantid=${loanjointapplicantid})}" th:object="${coborrower_entity}">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">共同借款人</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-4">
                                    <p id="checklineno" style="display: none;color: red">额度号必须是贷款申请客户本人的.</p>
                                    <div class="col-lg-4">
                                        <label>额度号：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" th:field="*{line_no}" id="line_no" name="line_no"
                                               required maxlength="20">
                                    </div>
                                </div>
                                <br/>
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>个人企业标志：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <select class="form-control" th:field="*{personalflag}" name="personalflag"
                                                id="personalflag" th:selected="*{personalflag}" required>
                                            <option value="1">个人</option>
                                            <option value="2">企业</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <div class="row" style="display: none">
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>客户号：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" th:field="*{custcode}" name="custcode" required
                                               maxlength="20">
                                        <input class="form-control" th:field="*{loanjointapplicantid}"
                                               id="loanjointapplicantid" name="loanjointapplicantid" required
                                               maxlength="20">
                                    </div>
                                </div>
                            </div>
                            <div id="company" style="display: none">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="col-lg-4">
                                            <label>贷款卡编号：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{ethnic}" name="ethnic" required
                                                   maxlength="20">
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="col-lg-4">
                                            <label>中文名称：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{firstName}" name="firstName"
                                                   required maxlength="20">
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="col-lg-4">
                                            <label>英文名称：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{lastName}" name="lastName" required
                                                   maxlength="20">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="individual">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="col-lg-4">
                                            <label>证件类型：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-control" selected="" name="pidtypeid" id="pidtypeid"
                                                    required maxlength="2">
                                                <option disabled selected value></option>
                                                <option th:each="idType:${coborrower_info.idTypeList}"
                                                        th:value="${idType.CODE}" th:text="${idType.CSTLDES}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="col-lg-4">
                                            <label>证件号码：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{pIdNo}" name="pIdNo" required
                                                   maxlength="20">
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="col-lg-4">
                                            <label>姓名：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{name}" name="name" required
                                                   maxlength="20">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>备注：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" th:field="*{remark}" id="remark" name="remark"
                                               required maxlength="20">
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4" align="center">
                                    <button type="reset" class="btn btn-primary">重 填</button>
                                    <button type="submit" id="save" class="btn btn-primary">保 存</button>
                                </div>
                                <div class="col-lg-4"></div>
                            </div>
                            <br/>


                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">共同借款人（个人）</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div id="toolbar_per" class="btn-group">
                                    <button id="btn_add_per" type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <!--<button id="btn_edit_per" type="button" class="btn btn-default">-->
                                        <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改-->
                                    <!--</button>-->
                                    <button id="btn_delete_per" type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <table id="tb_per_coborrowerinfo"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">共同借款人（企业）</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div id="toolbar_com" class="btn-group">
                                    <button id="btn_add_com" type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <!--<button id="btn_edit_com" type="button" class="btn btn-default">-->
                                        <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改-->
                                    <!--</button>-->
                                    <button id="btn_delete_com" type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <table id="tb_com_coborrowerinfo"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>


    </div>
    <!-- /#page-wrapper -->

</div>


<!-- /#wrapper -->


</body>

</html>
